<template>
  <div class="quick-buttons">
    <h4 class="quick-title">常用问题</h4>
    <div class="button-grid">
      <el-button
        v-for="(question, index) in quickQuestions"
        :key="index"
        class="quick-button"
        size="small"
        @click="$emit('selectQuestion', question)"
      >
        {{ question }}
      </el-button>
    </div>
  </div>
</template>

<script setup>
defineEmits(['selectQuestion'])

const quickQuestions = [
  '我想挂号',
  '查看科室信息',
  '预约检查',
  '咨询用药',
  '查询报告',
  '就诊流程',
  '医保政策',
  '急诊科位置',
  '停车指南',
  '联系方式'
]
</script>

<style scoped>
.quick-buttons {
  margin-bottom: 15px;
  padding: 15px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  backdrop-filter: blur(5px);
}

.quick-title {
  margin: 0 0 10px 0;
  color: #1976D2;
  font-size: 14px;
  font-weight: 600;
}

.button-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.quick-button {
  font-size: 12px;
  height: 32px;
  border: 1px solid #1976D2;
  color: #1976D2;
  background-color: rgba(255, 255, 255, 0.9);
}

.quick-button:hover {
  background-color: #1976D2;
  color: white;
}

@media (max-width: 768px) {
  .button-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .quick-button {
    font-size: 11px;
    height: 28px;
  }
}
</style>